<template>
  <n-space class="head" justify="space-between" align="center">
    <n-skeleton height="40px" width="12vw" round />
    <n-menu mode="horizontal" :options="menuOptions" />
    <LoginState></LoginState>
  </n-space>
</template>

<script setup lang="ts">
import { h } from 'vue';
import LoginState from '@components/LoginState.vue';
import SearchBar from '@components/SearchBar.vue';
import { useRouter, RouterLink } from 'vue-router';

// 菜单点击
const handleUpdateMenu = () => {};
const router = useRouter();

const menuOptions = [
  {
    label: () =>
      h(
        'a',
        {
          href: '#/main',
        },
        '首页'
      ),
    key: 'main',
  },
  {
    label: () =>
      h(
        'a',
        {
          href: '#/rank',
        },
        '排行'
      ),
    key: 'rank',
  },
  {
    label: () =>
      h(
        'a',
        {
          href: '#/expert',
        },
        '专家库'
      ),
    key: 'expert',
  },
  {
    label: () =>
      h(
        'a',
        {
          href: '#/forum',
        },
        '论坛'
      ),
    key: 'forum',
  },
  {
    label: () =>
      h(
        'a',
        {
          href: '#/portal',
        },
        '个人门户'
      ),
    key: 'portal',
  },
];
</script>

<style scoped lang="scss">
.head {
  height: 12vh;
  padding: 0 12vw;
  // TODO 区分用
  border: 1px solid #f1f1f1;
  box-sizing: border-box;
}
</style>
